<template>
  <div>
    <card-box title="条件筛选布局" icon="icon-template_template">
      <div slot="card-content">
        <div class="filter-box-wrapper animated" :class="showFilterBox?'bounce':''">
          <div class="btn_showMoreItem" @click="showMoreItem">
            <i :class="'iconfont '+(styleObject.height=='50px'?'icon-avatar-man':'icon-eye_close')"></i>
          </div>
          <el-row :gutter="5" class="filter-box" :style="styleObject">
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">编码：</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">下拉选择:</span>
                <el-select v-model="filterOpt.select1" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">日期选择:</span>
                <el-date-picker
                  size="small"
                  v-model="filterOpt.dateValue"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">凑数占位:</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">凑数占位:</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">凑数占位:</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">凑数占位:</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">凑数占位:</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="6">
              <div class="filter-box-content clearfix">
                <span class="lable">凑数占位:</span>
                <el-input placeholder="请输入内容" size="small" v-model="filterOpt.input1" clearable></el-input>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="24">
              <div class="filter-box-button">
                <el-button type="success" @click="searchInfo">查询</el-button>
                <el-button type="info" @click="resetFilter">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="handle-button-box">
          <el-button type="success" @click="addColumn">新增</el-button>
          <el-button type="primary" @click="delColumn">删除</el-button>
        </div>

        <EditTable
          ref="editable"
          @showDialog="showDialog"
          @handleSelect="handleSelect"
          @handleRowDblclick="handleRowDblclick"
          :formatfn="TableFormatFn"
        ></EditTable>
      </div>
    </card-box>
    <el-dialog
      v-el-drag-dialog
      :custom-class="'el-custom-dialog'"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      title="弹窗title"
    >
      <card-box
        title="title"
        color="linear-gradient(60deg,#26c6da,#00acc1)"
        icon="icon-template_template"
        minHeight="350px"
      >
        <div slot="card-content" class="todolist">
          <el-button type="success" @click="saveAndClose">保存关闭dialog</el-button>
        </div>
      </card-box>
    </el-dialog>
  </div>
</template>

<script>
// https://xuliangzhan.github.io/vue-element-extends/#/editable/click6
import CardBox from "@/components/CardBox"
import EditTable from "@/components/EditTable"
import regionData from "@/common/json/editable/region.json";
import { TableRow, TableColumns } from "@/utils/tableOptions.js";
import elDragDialog from "@/directive/el-dragDialog"; // base on element-ui
export default {
  name: "screeningForm",
  components: { CardBox, EditTable },
  directives: { elDragDialog },
  data () {
    return {
      dialogTableVisible: false,//弹层
      showFilterBox: false,
      styleObject: {
        height: '50px'
      },
      //筛选条件
      filterOpt: {
        input1: "",
        select1: '',
        dateValue: ""
      },
      //下拉框选项
      options: [{
        value: '1',
        label: '选项1'
      }, {
        value: '2',
        label: '选项2'
      }, {
        value: '3',
        label: '选项3'
      }, {
        value: '4',
        label: '选项4'
      }],
      //多层级选择器
      cascaderOptions: regionData,
      //表格数据-格式化方法
      TableFormatFn: (info, scope) => {
        // console.log(info)
        // console.log(scope)
        if(scope.column.label == "自定义内容"){
          return `<button>编辑</button>`;
        }else{
          return info;
        }
        
      },
      //表格数据
      // TableJson: {
      //   Config: { type: "multiple", OrderIsID: true, Order: "102", OrderType: "desc", PageIndex: 1, PageSize: 30, PagingCount: 0 },
      //   Index: [
      //     { IndexID: "name", IndexName: "name", IndexText: "禁止编辑", Width: "50" },
      //     { IndexID: "address", IndexName: "address", IndexText: "文本框编辑1", Width: "50", editRender: { name: 'ElInput' }},
      //     { IndexID: "date", IndexName: "date", IndexText: "日期编辑", Width: "50", editRender: { name: 'ElDatePicker', props: { type: 'date', format: 'yyyy-MM-dd' } } }
      //   ],
      //   Data: [{ date: '2016-05-03', name: '假数据Name', address: '假数据address', test: "假数据test", options: '1', num: "666", ElCascader: '1', ElSwitch: true },
      //   { date: '2016-05-02', name: '假数据Name', address: '假数据address', test: "假数据test", options: "2", num: "666", ElCascader: '1', ElSwitch: true },
      //   { date: '2016-05-02', name: '假数据Name', address: '假数据address', test: "假数据test", options: "3", num: "666", ElCascader: '1', ElSwitch: true },
      //   { date: '2016-05-02', name: '假数据Name', address: '假数据address', test: "假数据test", options: "4", num: "666", ElCascader: '1', ElSwitch: true },
      //   { date: '2016-05-02', name: '假数据Name', address: '假数据address', test: "假数据test", options: "1", num: "666", ElCascader: '1', ElSwitch: true }]
      // }
    };
  },
  created () {
  },
  mounted () {
    // 测试表格列封装
    let tableRow = new TableRow();
    tableRow.push(new TableColumns()._width("40")._fixed("left")._others({ type: 'index' }));
    tableRow.push(new TableColumns()._width("40")._fixed("left")._others({ type: 'selection' }));
    tableRow.push(new TableColumns()._data("data1")._width("150")._title("自定义内容"));
    tableRow.push(new TableColumns()._data("name")._width("150")._title("dialog")._editable(true)._editType("poupSelect"));
    tableRow.push(new TableColumns()._data("address")._width("150")._title("文本框编辑")._editable(true)._editType("input"));
    tableRow.push(new TableColumns()._data("date")._width("200")._title("日期")._editable(true)._editType("datePicker")._dataSource({ props: { type: 'date', format: 'yyyy/MM/dd' } }));
    tableRow.push(new TableColumns()._data("options")._width("150")._title("下拉")._editable(true)._editType("select")._dataSource({ options: this.options }));
    tableRow.push(new TableColumns()._data("num")._width("150")._title("数值")._editable(true)._editType("ElInputNumber"));
    tableRow.push(new TableColumns()._data("ElSwitch")._width("550")._title("开关")._editable(true)._editType("ElSwitch")._dataSource({ type: 'visible' }));
    let column = tableRow._cols();
    this.getTableData(column);

  },
  methods: {
    showMoreItem () {
      //展开搜索栏
      if (this.styleObject.height == "50px") {
        this.showFilterBox = true;
        this.styleObject = {
          height: "100%"
        }
      } else {
        this.showFilterBox = false;
        this.styleObject = {
          height: "50px"
        }
      }
    },
    //搜索查询
    searchInfo () {
    },
    //重置搜索条件
    resetFilter () {
      this.filterOpt = {
        input1: "",
        select1: '',
        dateValue: ""
      }
    },
    getTableData (column) {
      /* var setting = {
        url: '/getTableData',
        params: { name: 'cc', pageSize: 5, pageIndex: 1, isOrderId: 'date', orderType: 'ascending' },
        Config: {
          type: 'multiple',
          isOrderId: "date",
          orderType: "ascending"
        }
      }
      var column = [
        { type: 'selection', Width: '40', fixed: 'left' },
        { IndexID: "name", IndexName: "name", IndexText: "禁止编辑", Width: "150" },
        { IndexID: "address", IndexName: "address", IndexText: "文本框编辑", Width: "150", editRender: { name: 'ElInput' }},
       { IndexID: "date", IndexName: "date", IndexText: "日期", Width: "150", sortable: 'customer', editRender: { name: 'ElDatePicker', props: { type: 'date', format: 'yyyy-MM-dd' } } },
        { IndexID: "options", IndexName: "options", IndexText: "下拉", Width: "150", sortable: 'customer', editRender: { name: 'ElSelect', options: this.options } },
        { IndexID: "num", IndexName: "num", IndexText: "数值", Width: "550", editRender: { name: 'ElInputNumber' } },
        { IndexID: "ElSwitch", IndexName: "ElSwitch", IndexText: "开关", Width: "550", editRender: { name: 'ElSwitch', type: 'visible' } },
      ]*/

      this.$nextTick(() => {
        this.$refs.editable.SetColumn(column, { page: true,pageType: 'mini', height: "340" });//设置列属性
        this.$refs.editable.load("/getTableData", {}, 1, 10);//调用子组件初始化方法
      })
    },
    addColumn () {
      //新增一行
      console.log(this.$refs.editable.$refs.editable.getAllRecords())
      this.$refs.editable.$refs.editable.insert();
    },
    delColumn(){
      this.$alert('请选择要删除行', '信息', {
          confirmButtonText: '确定',
          // cancelButtonText: '取消'
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        });
      this.$refs.editable.$refs.editable.removeSelecteds()
    },
    //多选选中回调事件
    handleSelect (val) {
      console.log(val)
    },
    //当某一行被双击时会触发该事件
    handleRowDblclick (row, column, event) {
      console.log(row);
      console.log(column);
      console.log(event);
    },
    showDialog (scope, IndexName) {
      console.log(scope);
      console.log(IndexName);
      scope ? this.scope = scope : null;
      IndexName ? this.IndexName = IndexName : null;
      this.dialogTableVisible = !this.dialogTableVisible;
    },
    saveAndClose () {
      this.showDialog();
      this.$refs.editable.changeData(this.scope.$index, this.IndexName, '父组件改变数据');
      console.log(this.$refs.editable.getData())//获取表格数据
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-box-wrapper {
  position: relative;
  .btn_showMoreItem {
    width: 30px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    bottom: -18px;
    right: 10px;
    z-index: 2;
    text-align: center;
    background: #ff9800;
    i {
      color: #fff;
    }
  }
  .filter-box {
    border-top: 1px dashed #d8d8d8;
    border-bottom: 1px dashed #d8d8d8;
    margin: 10px 0px;
    padding: 5px 5px 0 5px;
    height: 50px;
    overflow: hidden;
    .filter-box-content {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .lable {
        padding: 10px 10px 10px 0;
        min-width: 70px;
        white-space: nowrap;
        color: #aaa;
        text-align: right;
        line-height: 1;
      }
      .el-select,
      .el-input {
        width: 100%;
      }
    }
    .filter-box-button {
      display: flex;
      justify-content: center;
      padding: 10px;
    }
  }
}

.handle-button-box {
  padding: 10px 0;
}
</style>
